document.getElementById('loginform').addEventListener('submit', function(event) {    
    // Prevent the form from submitting    
    event.preventDefault();    
    
    let username = document.getElementById('username').value;    
    let password = document.getElementById('password').value;    
    
    if (username !== '' && password !== '') {  // Check if both fields are not empty  
      alert('Login succeeded'); // Add an alert box for the success message   
      window.location.href = 'index.html'; // Redirect to index page  
    }   
    else {    
      let errorMessage = document.getElementById('errorMessage');    
      errorMessage.textContent = 'All fields must be filled in!';    
    
      // Change the background color of the empty field to red    
      if (username === '') {    
        document.getElementById('username').style.backgroundColor = 'pink';    
      }    
      if (password === '') {    
        document.getElementById('password').style.backgroundColor = 'pink';    
      }    
      alert('All fields must be filled in!'); // Add an alert box for the error message    
    }  
});
